<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color {
            color: red;
        }
    </style>
</head>

<body>

    <ul>
        <li>lorem01</li>
        <li>lorem02</li>
    </ul>


    <a href="https://baike.baidu.com/item/%E9%BB%84%E5%AE%97%E6%B3%BD/202864">我老公</a>

    <form action="index.js" method="post">
        <input type="text">
        <button>提交</button>
    </form>


    <script>

        //----- 阻止冒泡
        let ul = document.getElementsByTagName('ul')[0];
        let li = document.getElementsByTagName('li');

        ul.addEventListener('click', function () {
            ul.classList.toggle('color')

        })

        li[0].addEventListener('click', function (event) {
            event.stopPropagation();
            li[0].classList.toggle('color')
        })

        li[1].addEventListener('click', function (event) {
            event.stopPropagation();
            li[1].classList.toggle('color')
        })

        //----- 阻止元素默认行为
        // a标签：点击后会跳转到设定好的路径
        // 提交按钮（button\input:submit）:在点击后自动提交表单信息

        let a = document.getElementsByTagName('a')[0];
        a.onclick = function (event) {
            let boo = confirm('v我300');
            if (boo) {
                // alert('只准看一眼')
                console.log('只准看一眼');
            } else {
                //阻止跳转
                event.preventDefault();
            }
        }


    </script>

</body>

</html>